<template>
	<view class="match-list">
		<!-- 足球列表 -->
		<view class="football flex-c" v-if="sportId == 1">
			<template v-for="(match, index) in matchList">
				<view class="match-list-item thinborder flex-r" :key="index" v-if="match.id && match.statusId > 0" @tap="goMatchDetail(match)">
					<view class="left flex-c text-mini">
						<text>{{match.shortNameZh}}</text>
						<text class="lottery" v-if="match.jcNum">{{weekDay(match.jcNum.substring(0,1)) + match.jcNum.substring(1,4)}}</text>
						<text class="lottery" v-else-if="match.bdNum">北单{{match.bdNum}}</text>
					</view>
					<view class="center flex-c">
						<view class="top text-mini flex-r ac">
							<view class="center-left">
								<uni-dateformat :date="match.matchTime" format="MM.dd hh:mm"></uni-dateformat>
							</view>
							<view class="center-center" :class="{'color-blue': match.statusId > 1 && match.statusId < 8}">
								{{(match.statusId > 1 && match.statusId < 8) ? '进行中' : $CHS.getMatchFootStatus(match.statusId)}}
							</view>
							<view class="center-right" :class="{'color-grey': match.statusId > 1 && match.statusId < 8}">
								<text v-if="match.statusId > 2 && match.statusId < 9">
								半{{JSON.parse(match.homeScores)[1]}}:{{JSON.parse(match.awayScores)[1] + '  '}}
								</text>
								<text v-if="match.statusId > 1 && match.statusId < 9">
								角{{JSON.parse(match.homeScores)[4] > -1 ? JSON.parse(match.homeScores)[4] : 0}}:{{JSON.parse(match.awayScores)[4] > -1 ? JSON.parse(match.awayScores)[4] :  0}}
								</text>
							</view>
						</view>
						<view class="middle flex-r">
							<view class="center-left flex-r">
								<view class="card">
									<text class="yellow" v-if="JSON.parse(match.homeScores)[3] != 0">{{JSON.parse(match.homeScores)[3]}}</text>
									<text class="red" v-if="JSON.parse(match.homeScores)[2] != 0">{{JSON.parse(match.homeScores)[2]}}</text>
								</view>
								<view class="name">
									<text class="text-small">{{match.homeNameZh}}</text>
								</view>
							</view>
							<view class="center-center">
								<text class="text-large" :class="{'color-red': match.statusId > 1 && match.statusId < 8}" v-if="match.statusId > 1 && match.statusId < 9">
									{{$CHS.sumScoreFoot(match.homeScores)+'-'+$CHS.sumScoreFoot(match.awayScores)}}
								</text>
								<text class="text-primary" v-else>
									VS
								</text>
							</view>
							<view class="center-right flex-r">
								<view class="name">
									<text class="text-small">{{match.awayNameZh}}</text>
								</view>
								<view class="card">
									<text class="red" v-if="JSON.parse(match.awayScores)[2] != 0">{{JSON.parse(match.awayScores)[2]}}</text>
									<text class="yellow" v-if="JSON.parse(match.awayScores)[3] != 0">{{JSON.parse(match.awayScores)[3]}}</text>
								</view>
							</view>
						</view>
						<!-- <view class="bottom text-mini color-yellow" v-if="match.articleNum">
							<text>本场比赛共有{{match.articleNum}}个料</text>
						</view> -->
					</view>
					<view class="right flex-c ac jc" @tap.stop="seletRemindTime(index)">
						<template v-if="match.statusId == 1 || follow">
							<image src="@/public/images/match/ysc.png" mode="aspectFit" v-if="follow || (match.followStatus==1 && noFollow[0].indexOf(match.id)==-1) || isFollow[0].indexOf(match.id)>-1"></image>
							<image src="@/public/images/match/sc.png" mode="aspectFit" v-else></image>
						</template>
						<text class="text-mini color-yellow" :class="{'mt0': match.statusId != 1 && !follow}" v-if="match.articleNum">{{match.articleNum}}个方案</text>
					</view>
				</view>
			</template>
		</view>
		<!-- 篮球列表 -->
		<view class="basketball flex-c" v-else>
			<template v-for="(match, index) in matchList">
				<view class="match-list-item thinborder flex-r" :key="index" v-if="match.id && match.statusId > 0" @tap="goMatchDetail(match)">
					<view class="left flex-c">
						<text class="text-mini color-grey">{{match.shortNameZh}}</text>
						<view class="lottery flex-r" v-if="match.jcNum">
							<text class="text-mini color-grey">{{weekDay(match.jcNum.substring(0,1)) + match.jcNum.substring(1,4)}}</text>
						</view>
						<text class="text-secondary text-bold mt20 text-hidden">{{match.awayNameZh}}</text>
						<text class="text-secondary text-bold mt20 text-hidden">{{match.homeNameZh}}</text>
					</view>
					<view class="center flex-c">
						<view class="match-info text-mini color-grey flex-r ac">
							<uni-dateformat class="time" :date="match.matchTime" format="MM.dd hh:mm"></uni-dateformat>
							<text class="status" :class="{'color-blue': match.statusId > 1 && match.statusId < 10}">{{$CHS.getMatchBasketStatus(match.statusId)}}</text>
						</view>
						<view class="match-blank" v-if="match.jcNum"></view>
						<template v-if="match.statusId > 1 && match.statusId < 11">
							<view class="match-score mt20 flex-r ac">
								<view class="score">{{JSON.parse(match.awayScores)[0]}}</view>
								<view class="score">{{JSON.parse(match.awayScores)[1] == 0 ? '-' : JSON.parse(match.awayScores)[1]}}</view>
								<view class="score">{{JSON.parse(match.awayScores)[2] == 0 ? '-' : JSON.parse(match.awayScores)[2]}}</view>
								<view class="score">{{JSON.parse(match.awayScores)[3] == 0 ? '-' : JSON.parse(match.awayScores)[3]}}</view>
								<view class="score" v-if="JSON.parse(match.homeScores)[4] != 0 || JSON.parse(match.awayScores)[4] != 0">{{JSON.parse(match.awayScores)[4]}}</view>
								<view class="score color-red">{{$CHS.sumScoreBasket(match.awayScores)}}</view>
							</view>
							<view class="match-score mt20 flex-r ac">
								<view class="score">{{JSON.parse(match.homeScores)[0]}}</view>
								<view class="score">{{JSON.parse(match.homeScores)[1] == 0 ? '-' : JSON.parse(match.homeScores)[1]}}</view>
								<view class="score">{{JSON.parse(match.homeScores)[2] == 0 ? '-' : JSON.parse(match.homeScores)[2]}}</view>
								<view class="score">{{JSON.parse(match.homeScores)[3] == 0 ? '-' : JSON.parse(match.homeScores)[3]}}</view>
								<view class="score" v-if="JSON.parse(match.homeScores)[4] != 0 || JSON.parse(match.awayScores)[4] != 0">{{JSON.parse(match.homeScores)[4]}}</view>
								<view class="score color-red">{{$CHS.sumScoreBasket(match.homeScores)}}</view>
							</view>
							<view class="match-score mt20 flex-r ac color-grey">
								<view class="score">1ST</view>
								<view class="score">2ND</view>
								<view class="score">3RD</view>
								<view class="score">4TH</view>
								<view class="score" v-if="JSON.parse(match.homeScores)[4] != 0 || JSON.parse(match.awayScores)[4] != 0">OT1</view>
								<view class="score color-red">总</view>
							</view>
						</template>
						<view class="match-status mt20 flex-r ac" v-else>
							<text class="text-secondary text-bold">VS</text>
						</view>
					</view>
					<view class="right flex-c ac jc" @tap.stop="seletRemindTime(index)">
						<template v-if="match.statusId == 1 || follow">
							<image src="@/public/images/match/ysc.png" mode="aspectFit" v-if="follow || (match.followStatus==1 && noFollow[1].indexOf(match.id)==-1) || isFollow[1].indexOf(match.id)>-1"></image>
							<image src="@/public/images/match/sc.png" mode="aspectFit" v-else></image>
						</template>
						<text class="text-mini color-yellow" :class="{'mt0': match.statusId != 1 && !follow}" v-if="match.articleNum">{{match.articleNum}}个方案</text>
					</view>
					<image class="status-icon" src="@/public/images/match/jxz.png" mode="aspectFit" v-if="match.statusId > 1 && match.statusId <10"></image>
				</view>
			</template>
		</view>
		<!-- 到底提示 -->
		<view class="list-end flex-r mt20 pb20" v-if="isEnd && matchList[0]">
			<text>已经到底啦～</text>
		</view>
		<!-- 关注比赛提醒时间选择 -->
		<MatchRemind v-if="visible" :datetime="matchList[select].matchTime" @close="visible=false" @submit="favMatch(false, $event)"></MatchRemind>
	</view>
</template>

<script>
	/**
	 * MatchList 比赛列表
	 * @description 比赛列表用于赛事首页、我的收藏等页面
	 * @property {array} matchList 比赛列表数据
	 * @property {number} sportId = [1|2] 比赛类型：1 足球；2篮球
	 * @property {boolean} [follow] = [true|false] 是否已经收藏
	 * @property {boolean} isEnd = [true|false] 是否已经加载完
	 * @example <MatchList :matchList="matchList" :isEnd="false" :follow="true"></MatchList> 
	 */
	export default {
		name:"MatchList",
		props: {
			matchList: {
				type: Array,
				default: () => {
					return []
				}
			},
			sportId: {
				type: Number,
				default: 1
			},
			follow: {
				type: Boolean,
				default: false
			},
			isEnd: {
				type: Boolean,
				default: false
			}
		},
		components: {
			MatchRemind: () => import('./ch-matchremind.vue')
		},
		computed: {
			user() {
				return this.$store.state.user
			},
			noFollow() {
				return this.$store.state.matchNoFollow
			},
			isFollow() {
				return this.$store.state.matchFollow
			}
		},
		data() {
			return {
				isFaving: null,
				select: null,
				visible: false
			};
		},
		methods: {
			//星期文字转换
			weekDay(day) {
				return this.$CHS.weekStr[day-1]
			},
			//进入比赛详情
			goMatchDetail(match) {
				let name = this.sportId == 1 ? 'matchfoot' : 'matchbasket'
				let params = {mid: match.id, sportId: this.sportId}
				this.$goByName(name, params);
			},
			//选择提醒时间
			seletRemindTime(index) {
				if(!this.$store.state.isLogin){
					this.$CHS.goUserLogin()
					return
				}
				if(this.matchList[index].statusId == 1 || this.follow){
					this.select = index
					let commonId = this.matchList[index].id;
					let realStatus = this.follow || (this.matchList[index].followStatus == 1 && this.noFollow[this.sportId-1].indexOf(commonId) == -1) || this.isFollow[this.sportId-1].indexOf(commonId) > -1
					if(realStatus){
						this.visible = false
						this.favMatch(realStatus)
					}else{
						this.visible = true
					}
				}else{
					this.goMatchDetail(this.matchList[index])
				}
			},
			//取消关注比赛
			favMatch(realStatus, remindTime) {
				console.log(remindTime);
				let index = this.select;
				let commonId = this.matchList[index].id;
				if(this.isFaving == commonId){
					return
				}
				this.isFaving = commonId
				this.$http.post({
					url: realStatus ? '/api/appUser/upcareUserFollow' : '/api/appUser/careUserFollow',
					data: {
						commonId,
						remindTime,
						sportId: this.sportId,
						type: 3,
						userId: this.user.userId,
					},
				}).then(data => {
					console.log(data);
					if(data.success){
						let match = {
							sportId: this.sportId,
							matchId: commonId
						}
						if(realStatus){
							this.matchList[index].followStatus = 2
							this.$store.commit('NO_FOLLOW_MATCH', match)
							this.$ShowToast({text: '已取消收藏', type: 1})
						}else{
							this.matchList[index].followStatus = 1
							this.$store.commit('IS_FOLLOW_MATCH', match)
							this.$ShowToast({text: '已收藏', type: 1})
						}
					}else{
						uni.showToast({
							title: data.message,
							icon: 'error'
						})
					}
				}).catch((err) => {
					console.log(err);
				}).finally(()=>{
					this.isFaving = null
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.football{
		width: 100%;
		.match-list-item{
			.left{
				width: 100rpx;
				color: #666666;
				.lottery{
					margin-top: 20rpx;
					line-height: 36rpx;
				}
			}
			.center{
				flex: 2;
				.center-center{
					width: 105rpx;
					text-align: center;
				}
				.center-left{
					flex: 2;
					text-align: right;
				}
				.center-right{
					flex: 2;
					text-align: left;
				}
				.top{
					color: #B3B3B3;
					.color-grey{
						color: #666666;
					}
				}
				.middle{
					margin-top: 20rpx;
					line-height: 36rpx;
					font-weight: bold;
					.name{
						max-width: 160rpx;
						word-break: break-all;
						//text-align: justify;
					}
					.card{
						font-size: 22rpx;
						color: #FFFFFF;
						text{
							height: 24rpx;
							line-height: 24rpx;
							padding: 0rpx 2rpx;
						}
						.red{
							background: #F23030;
						}
						.yellow{
							background: #FFAE00;
						}
					}
					.text-large, .text-primary{
						font-family: Roboto;
						font-weight: 500;
					}
					.center-right{
						justify-content: flex-start;
						.card{
							text{
								margin-left: 10rpx;
							}
						}
					}
					.center-left{
						justify-content: flex-end;
						.card{
							text{
								margin-right: 10rpx;
							}
						}
					}
				}
				.bottom{
					text-align: center;
					margin-top: 20rpx;
				}
			}
			.right{
				width: 100rpx;
				image{
					width: 32rpx;
					height: 32rpx;
				}
				.color-yellow{
					margin-top: 12rpx;
					color: #FF8400;
					&.mt0{
						margin-top: 0;
					}
				}
			}
		}
	}
	.basketball{
		width: 100%;
		.match-list-item{
			position: relative;
			.left{
				width: 220rpx;
				.text-secondary{
					overflow: hidden;
					text-overflow:ellipsis;
					white-space: nowrap;
				}
				.match-des{
					white-space: nowrap;
				}
				.color-grey{
					color: #666666;
				}
				.lottery{
					height: 30rpx;
					align-items: flex-end;
				}
			}
			.center{
				flex: 2;
				margin-left: 40rpx;
				.match-info{
					.time{
						margin-left: 16rpx;
					}
					.status{
						margin-left: 20rpx;
					}
				}
				.match-blank{
					height: 30rpx;
				}
				.match-score{
					.score{
						width: 60rpx;
						font-size: 24rpx;
						font-weight: 500;
						font-family: Roboto;
						text-align: center;
					}
					.color-red{
						margin-left: 20rpx;
					}
					&.color-grey{
						.score,.color-red{
							font-size: 20rpx;
							font-weight: 400;
						}
					}
				}
				.match-status{
					width: 60rpx;
					height: 68rpx;
					margin-left: 16rpx;
				}
			}
			.right{
				width: 100rpx;
				image{
					width: 32rpx;
					height: 32rpx;
				}
				.color-yellow{
					margin-top: 12rpx;
					color: #FF8400;
				}
			}
			.status-icon{
				position: absolute;
				top: 0;
				right: 0;
				width: 80rpx;
				height: 32rpx;
			}
		}
	}
	.match-list-item{
		padding: 25rpx 20rpx;
		background: #FFFFFF;
		//border-bottom: #EDEDED 1rpx solid;
		//content-visibility: auto;
	}
	.match-list-item:last-child{
		&.thinborder{
			&::after{
				content: unset;
			}
		}
	}
	.full-screen{
		z-index: 1000;
	}
</style>